{% extends "base-succeed.html" %}

{% block nav %}

  <li id="self"><a href="/succeed">个人中心</a></li>
  <li id="score"><a href="/more/1">成绩</a></li>
  <li id="all"><a href="/more/4">总成绩</a></li>
  <li id="seh"><a href="/more/3">课表</a></li>
  <li id="old-cet"><a href="/more/5">往年CET</a></li>
  <li id="time"><a href="/more/2">考试时间</a></li>
  <li id="back"><a href="/">返回首页</a></li>

{% endblock %}

{% block content %}
<br>
<div>
  {% if jidian %}
  <div class="auto-over-x">
    <table class="base-table" >
      <tr>
        <th>
          <strong>平均学分绩点</strong>
        </th>
        <td>
          <strong>{{ jidian }}</strong>
        </td>
        <td>
          <strong><a href="/help/gpa.html">绩点计算方法</a></strong>
        </td>
      </tr>
    </table>
  </div>  
  {% endif %}

  {% if score_table %}
      <table class="base-table score-table" id="all_score">
        {% for i in score_table %}
        {{i}}
        {% endfor %}
      </table>
  {% endif %}

  {% if table %}
    <div class="auto-over-x">

      <table class="base-table">
        {% for i in table %}
        {{i}}
        {% endfor %}
      </table>

    </div>
  {% endif %}

  {% if cet_table %}
    <table  class="base-table cet-old-table">
      {{ cet_table }}
    </table>
  {% endif %}

  {% if just_table %}
  <div class="auto-over-x">
    <table  class="base-table cet-old-table">
      {{ just_table }}
    </table>
  </div>
  {% endif %}

  {% if error %}
    <h2 id="error">{{ error }}</h2>
  {% endif %}

</div>

{% endblock content %}

{% block foot %}

<script type="text/javascript">

var t = Number(window.location.href.slice(-1));
var dic = ["back","score","time","seh","all","old-cet"]

document.getElementById(dic[t]).className="active";
</script>


{% if score_table or cet_table %}
  

<script>
if ($(document).width()<=640) {
  // counts total number of td in a head so that we can can use it for label extraction
  var head_col_count =  $('tbody th').size();
  // loop which replaces td
  for ( i=0; i <= head_col_count; i++ )  {
    // head column label extraction
    var head_col_label = $('th:nth-child('+ i +')').text();
    // replaces td with <div class="column" data-label="label">
    $('tr td:nth-child('+ i +')').replaceWith(
      function(){
        return $('<div class="column" data-label="'+ head_col_label +'">').append($(this).contents());
      }
    );
  } 
  // replaces table with <div class="table">
  $('table').replaceWith(
    function(){
      return $('<div class="table">').append($(this).contents());
    }
  );  
  // replaces thead with <div class="table-head">
  $('tbody tr:nth-child(1)').replaceWith(
    function(){
      return $('<div class="table-head">').append($(this).contents());
    }
  );  
  // replaces tr with <div class="row">
  $('tr').replaceWith(
    function(){
      return $('<div class="row">').append($(this).contents());
    }
  );  
  // replaces th with <div class="column">
  $('th').replaceWith(
    function(){
      return $('<div class="column">').append($(this).contents());
    }
  );
  $('tbody').replaceWith(
    function(){
      return $('<div class="table-body">').append($(this).contents());
    }
  );  
  };
</script>

{% endif %}

{% endblock %}
